<template>
    <view class="e-book">
		<view class="top">
			<view class="fanyi">
				<image v-show="!show1" src="/static/index1/99.png" mode="widthFix" @click.stop="show1 = !show1"></image>
				<image v-show="show1" src="/static/index1/100.png" mode="widthFix" @click.stop="show1 = !show1"></image>
			</view>
			<view class="caidan">
				<image v-show="!show2" src="/static/index1/101.png" mode="widthFix" @click.stop="changeShow2"></image>
				<image v-show="show2" src="/static/index1/102.png" mode="widthFix" @click.stop="changeShow2"></image>
				<div class="box-drop">
					<u-dropdown ref="dropdown">
						<u-dropdown-item v-model="value1"  :options="options1"></u-dropdown-item>
					</u-dropdown>
				</div>
			</view>
		</view>
        <scroll-view :scroll-y="true" style="width:100%;height:calc(100vh - 300rpx)">
        	<u-parse :html="html"></u-parse>
        </scroll-view>
		<view class="btn-box">
			<image src="/static/index1/97.png" mode="widthFix"></image>
			<image src="/static/index1/98.png" mode="widthFix"></image>
		</view>
		
    </view>
</template>
<script>
export default {
    data(){
        return {
			html:'', 
			show1:false,
			show2:false,
			value1:'',
			options1:[{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},]
        }
    },
    mounted(){},
    methods:{
        changeShow2(){
			this.show2 = !this.show2
			if(this.show2) {
				this.$refs.dropdown.open(0)
			} else {
				this.$refs.dropdown.close(0)
			}
		}
    }
}
</script>
<style lang="scss" scoped>
	.top{
		display: flex;
		justify-content: flex-end;
		padding: 0 20rpx;
		.fanyi,.caidan{
			position: relative;
			image{
				width: 60rpx;
				cursor: pointer;
			}
		}
		.fanyi{
			margin-right: 100rpx;
		}
	}
	
	.btn-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 50rpx;
		image{
			width: 100rpx;
			cursor: pointer;
		}
	}
	
	.box-drop{
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 111;
	}
	
	::v-deep .u-dropdown{
		.u-dropdown__menu{
			width: 500rpx;
			// display: none;
		}
		.u-dropdown__content{
			width: 500rpx;
			top: 0 !important;
			height: calc(100vh - 500rpx) !important;
			overflow-y: auto;
		}
		.u-dropdown__menu__item{
			display: none !important;
		}
	}
	
	
</style>